<template>
  <div class="app-container">
    <el-card v-loading="loading" >
      <div slot="header">
        <el-button type="primary" @click="resetForm()">返回</el-button>
      </div>
      <el-form ref="ruleForm" :model="formData" :rules="rules" label-width="120px" >
        <el-row>
          <el-col :span="12">
            <el-card  style="border: 0" shadow="never">
              <el-form-item label="发布日期" prop="pushTime">
                   <el-date-picker
                      v-model="formData.pushTime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime"
                      placeholder="选择日期时间">
                    </el-date-picker>
              </el-form-item>
              <!--<el-form-item label="订单号" prop="orderNo">-->
                <!--<el-input placeholder="订单号" v-model="formData.orderNo"/>-->
              <!--</el-form-item>-->
              <el-form-item label="需求计划单号" prop="planNumber">
                <el-input placeholder="需求计划单号"  v-model="formData.planNumber"/>
              </el-form-item>
              <el-form-item label="标准对象号" prop="standObjectNumber">
                <el-input placeholder="标准对象号" v-model="formData.standObjectNumber"/>
              </el-form-item>
              <el-form-item label="标准对象项目号" prop="standProjectNumber">
                <el-input placeholder="标准对象项目号" v-model="formData.standProjectNumber"/>
              </el-form-item>
              <!--<el-form-item label="物料编码" prop="materailNumber">-->
                <!--<el-input placeholder="物料编码" v-model="formData.materailNumber"/>-->
              <!--</el-form-item>-->
               <!--<el-form-item label="物料描述" prop="materailDesc">-->
               <!--<el-input v-model="formData.materailDesc" class="textarea" type="textarea" :rows="5" />-->
              <!--</el-form-item>-->
              <!--<el-form-item label="数量" prop="purchaseQuantity">-->
                <!--<el-input placeholder="数量" v-model="formData.purchaseQuantity"/>-->
              <!--</el-form-item>-->
             <!--<el-form-item label="单位" prop="unit">-->
                <!--<el-input placeholder="单位" v-model="formData.unit"/>-->
              <!--</el-form-item>-->

              <el-form-item label="项目文本" prop="projectText">
                 <el-input v-model="formData.projectText" class="textarea" type="textarea" :rows="5" />
              </el-form-item>
              <div style="border: 1px solid #DCDFE6;padding: 10px;" v-if="formData.materailInfoList.length" v-for="(item,index) in formData.materailInfoList" :key="index">
                  <p>物料{{ materiaOptions.find(it => it.id == item.materailBasicInfoId).materialName }}：</p>
                  <el-form-item prop="projectText" label="数量">
                    <div style="display: flex;align-items: center;">
                      <el-input v-model="item.purchaseQuantity" type="number" :rows="5" />
                      <i v-if="formData.statusName == '新建'" @click="deleLine(index)" style="cursor: pointer;color: #409EFF;font-size: 18px;" class="el-icon-remove-outline"></i>
                    </div>
                  </el-form-item>
                  <el-form-item label="工厂非限制库存" prop="notLimitStock">
                    <el-input type="number" placeholder="工厂非限制库存" v-model="item.notLimitStock" />
                  </el-form-item>
                  <el-form-item label="单价" prop="singlePrice">
                    <el-input placeholder="单价" v-model="item.singlePrice"/>
                  </el-form-item>
                </div>
                <el-form-item v-if="formData.statusName == '新建'">
                    <span>添加物料：<i @click="visible = true" style="cursor: pointer;color: #409EFF;font-size: 18px;" class="el-icon-circle-plus-outline"></i></span>
                </el-form-item>

            </el-card>
          </el-col>
          <el-col :span="12" >
            <el-card style="border: 0" shadow="never">
              <el-form-item label="卸货点" prop="unloadingAddress">
                <el-input placeholder="卸货点" v-model="formData.unloadingAddress"/>
              </el-form-item>
              <el-form-item label="提报单元文本" prop="submitText">
                <el-input v-model="formData.submitText" class="textarea" type="textarea" :rows="5" />
              </el-form-item>
              <el-form-item label="库存地" prop="stockAddress">
                <el-input placeholder="库存地" v-model="formData.stockAddress"/>
              </el-form-item>
              <el-form-item label="行项目金额" prop="projectAmount">
                <el-input placeholder="行项目金额" type="number" v-model="formData.projectAmount"/>
              </el-form-item>
              <!-- <el-form-item label="易派客物料标识" prop="ypkProductFlag">
                <el-input placeholder="易派客物料标识" v-model="formData.ypkProductFlag"/>
              </el-form-item> -->
              <el-form-item label="工单/网络号" prop="workOrderNo">
                <el-input placeholder="工单/网络号" v-model="formData.workOrderNo"/>
              </el-form-item>
              <el-form-item label="成本中心" prop="costCenter">
                <el-input placeholder="成本中心" v-model="formData.costCenter"/>
              </el-form-item>
              <el-form-item label="业务类型" prop="businessType">
                <el-input placeholder="业务类型" v-model="formData.businessType"/>
              </el-form-item>
                <!--<el-form-item label="供应商" prop="supplierId">-->

                  <!--<el-select clearable v-model="formData.supplierId" placeholder="请选择">-->
                    <!--<el-option-->
                      <!--v-for="item in allSuppliers"-->
                      <!--:key="item.value"-->
                      <!--:label="item.supplierName"-->
                      <!--:value="item.id">-->
                    <!--</el-option>-->
                  <!--</el-select>-->

              <!--</el-form-item>-->

            </el-card>
          </el-col>
          <el-col :span="12" >

          </el-col>
        </el-row>

        <el-form-item>
          <el-button @click="resetForm">关闭</el-button>
          <el-button :loading="isAdd" type="primary" @click="submitForm('ruleForm')">
            <span v-if="isAdd">提交中...</span>
            <span v-else>提交</span>
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-dialog :visible.sync="visible" append-to-body width="33%">
      <p class="map">物料编号</p>
      <el-select clearable v-model="materailInfoValue" filterable
                 remote
                 reserve-keyword
                 :remote-method="queryMaterail"
                 :loading="loading" placeholder="请输入物料描述">
        <el-option
          v-for="item in materiaOptions"
          :key="item.value"
          :label="item.materialNumber+'---'+item.materialName"
          :value="item.id">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
        <el-button class="global-button" round type="primary" @click="submitLine">确认</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { procurementDetail, submitProcurement, reSubmitProcurement,getMaterialAll,getAllSuppliers } from '@/api/purchaseApply.js'
import { formatTime } from '@/utils/utils.js'
let $this = null
export default {
  name: 'submitForm',
  props: {
    subData: {
      type: Object,
      default: {}
    }
  },
  data () {
    return {
      isAdd: false,
      loading: false,
      formData: {
        materailInfoList: [],
        statusName: "新建"
      },
      queryInfo: {
        pageNo: 1,
        pageSize: 25,
      },
      rules: {},
      materailInfoValue: null,
      materiaOptions: [],
      allSuppliers:[],
      visible: false
    }
  },
  created () {
    $this = this
    this.init()
    if ($this.subData.btnId == 1) {
      $this.procurementDetail()
    }

  },
  methods: {
    queryMaterail(queryWord){
      this.materiaOptions=[]
      this.queryInfo.materialName=queryWord
      getMaterialAll(this.queryInfo).then(res => {
        this.materiaOptions = res.data.data.records && res.data.data.records
      })
    },
    deleLine (index) {
      this.formData.materailInfoList.splice(index,1)
    },
    submitLine () {
      if(!this.materailInfoValue) {
        this.$message.warning("请选择物料编号")
        return
      }
      this.visible = false
      this.formData.materailInfoList.push({
        materailBasicInfoId: this.materailInfoValue,
        purchaseQuantity: null,
        notLimitStock: null,
        singlePrice: null,
        materailNumber: null,
      })
      this.materailInfoValue = null
    },
    init () {
      // getMaterialAll().then(res => {
      //   this.materiaOptions = res.data.data && res.data.data
      // })

      getAllSuppliers().then(res=>{
        this.allSuppliers=res.data.data && res.data.data
      })

    },
    // 详情
    procurementDetail () {
      $this.loading = true
      procurementDetail($this.subData.id).then(res => {
        $this.loading = false
        res.data.data.statusName = res.data.data.status.name
        $this.formData = res.data.data
      }).catch(err => { $this.loading = false })
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (!valid) {
          return $this.$message.error('请完善表单信息')
        }
        $this.formData.statusName = null
        if ($this.subData.btnId == 0) { // 修改
          $this.isAdd = true
          submitProcurement($this.formData).then(res => {
            $this.isAdd = false
            if (res.data.code == 500) {
              return $this.$message.error(res.data.message)
            }
            $this.$emit('refresh')
          }).catch(err => { $this.isAdd = false })
        }
        if ($this.subData.btnId == 1) { // 提交
          $this.isAdd = true
          reSubmitProcurement($this.formData).then(res => {
            $this.isAdd = false
            if (res.data.code == 500) {
              return $this.$message.error(res.data.message)
            }
            $this.$emit('refresh')
          }).catch(err => { $this.isAdd = false })
        }
      })
    },
    resetForm () {
      $this.$emit('closeView')
    }

  }
}
</script>

<style scoped lang="scss">
  .el-input,.textarea {
    // width: 500px;
  }

</style>
